<template>
	<view>
		
		<view class="banklist" v-for="(item,index) in main" @longpress="longdeleteback(item)">
			<view class="cardtop">
				<view class="cardtopleft">
					<image :src=item.bankIconLink mode="" ></image>
				</view>
				<view class="cardtopright">{{item.bankName}}</view>
			</view>
			<view class="cardcenter">
				{{replaceStr(item.cardNumber)}}
			</view>
			<view class="cardbottom">
				<view class="bankrighttop">结算日：{{item.billingDate }}日</view>
				<view class="bankrightbottom">还款日：{{item.lastRepaymentDate }}日</view>
			</view>
			<!-- <view class="bankleft">
				<image :src=item.bankIconLink mode="" style="height:80upx;width: 80upx;"></image>
			</view>
			<view class="bankcenter">
				<view class="bankcentertop">{{item.bankName}}</view>
				<view class="bankcenterbottom">{{replaceStr(item.cardNumber)}}</view>
			</view>
			<view class="bankright">
				<view class="bankrighttop">结算日：{{item.billingDate |times}}</view>
				<view class="bankrightbottom">还款日：{{item.lastRepaymentDate |times}}</view>
			</view> -->
			<u-modal :content="content" :show="show" @confirm='deleteback(item.id)' showCancelButton ref="uModal" :asyncClose="true" :closeOnClickOverlay="true" @cancel="() => show = false"></u-modal>
		</view>
		
		
		
		
		
		<!-- <view class="banklistold" @click="newbank()">
			<view class="bankleft">
				<image :src=plus mode="" style="height:80upx;width: 80upx;"></image>
			</view>
			<view class="addbank">
				点击添加银行卡
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		selectcard,
		deletecard
	} from '@/api/club'
	export default {
		data() {
			return {
				content:'',
				show:false,
				plus:'../../static/tabsIcon/plus.png',
				main:[],
				cardid:null,
			}
		},
		filters: {
			times(value) {
				let date = new Date(value);
				let y = date.getFullYear(); // 年
				let MM = date.getMonth() + 1; // 月
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate(); // 日
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours(); // 时
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes(); // 分
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds(); // 秒
				s = s < 10 ? ('0' + s) : s;
				// var timer =  y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
				var timer = y + '-' + MM + '-' + d;
				return timer;
			}
		},
		onShow() {
			this.selectbankcard();
		},
		methods: {
			replaceStr(str) {
			    return str.replace(/(.{4})/g,'$1    ');
			},
			cancel(){
				this.show = false;
			},
			selectbankcard() {
				selectcard().then(res => {					
					if(res.success == 1){
						this.main = res.data
					}else{
						uni.showToast({
							title: res.message,
							icon:'none',
							duration: 2000
						});
					}
				})
			},
			longdeleteback(item){
				this.show = true;
				this.content = "是否删除 "+item.bankName+' 卡号为 '+item.cardNumber+' 的账单提醒?';
				this.cardid = item.id;
			},
			deleteback(item){
				
				deletecard(this.cardid).then(res => {
					if(res.success == 1){
						uni.showToast({
							title: '删除成功',
							icon:'none',
							duration: 2000
						});
						this.selectbankcard();
					}else{
						uni.showToast({
							title: res.message,
							icon:'none',
							duration: 2000
						});
					}
						this.show = false;
				})
			},
			newbank(){
				uni.navigateTo({
					url: '/pages/club/newbank',
				});
			}
		}
	}
</script>

<style>
	page{
		background-color: rgb(229, 231, 233);
	}
</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	
	.banklist{
		height: 300upx;
		width: 95%;
		// display: flex;
		// padding: 32upx 20upx;
		align-items: center;
		margin-bottom: 20upx;
		background-image: url("../../static/tabsIcon/club/clubbg.png");
		background-size: 100% 100%;
		margin: 20upx auto;
		border-radius: 20upx;
		.addbank{
			height: 172upx;
			line-height: 172upx;
			// margin-top: 70upx;
		}
		
		.cardtop{
			display: flex;
			align-items: center;
			.cardtopleft{
				image{
					height:80upx;
					width: 80upx;
					background-color: #FFFFFF;
					border-radius: 999rem;
					margin-top: 40upx;
					margin-left: 40upx;
				}
			}
			.cardtopright{
				margin-top: 40upx;
				margin-left: 40upx;
				color: #FFFFFF;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
		.cardcenter{
			margin: 20upx auto;
			width: 90%;
			text-align: center;
			color: #FFFFFF;
			// background-color: #007AFF;
		}
		.cardbottom{
			display: flex;
			justify-content: space-around;
			color: #FFFFFF;
		}
		// .bankleft {
		// 	// width: calc(100% - 600upx - 32upx);
		// 	margin-left: 32upx;
		// 	width: 12%;
		// }
		// .bankcenter{
		// 	height: 172upx;
		// 	font-size: 34upx;
		// 	font-family: PingFangSC-Regular, PingFang SC;
		// 	font-weight: 400;
		// 	color: rgba(0, 0, 0, 0.9);
		// 	width: 60%;
		// 	// line-height: 40upx;
		// 	.bankcentertop{
		// 		margin-left: 18upx;
		// 		margin-top: 30upx;
		// 	}
		// 	.bankcenterbottom{
		// 		margin-left: 18upx;			
		// 		margin-top: 10upx;
		// 		font-size: 28upx;
		// 		font-weight: 400;
		// 	}
		// }
		// .bankright{
		// 	height: 172upx;
		// 	width: 28%;
		// 	font-size: 30upx;
		// 	font-family: PingFangSC-Regular, PingFang SC;
		// 	font-weight: 400;
		// 	color: rgba(0, 0, 0, 0.9);
		// 	.bankrighttop{
		// 		margin-top: 30upx;
		// 	}
		// 	.bankrightbottom{
		// 		margin-top: 14upx;
		// 	}
		// }
		
	}
	.banklistold{
		background-color: #FFF;
		width: 95%;
		display: flex;
		// padding: 32upx 20upx;
		height: 172upx;
		align-items: center;
		margin: 40upx auto;
		border-radius: 20upx;
	}
</style>
